<template>
  <div class="users-base-wrapper">
    <div class="module-name">
      <div>
        <span style="display: inline-block; border-left: 4px solid #753cca; line-height: 25px; padding-left: 12px;">核查设置({{ queryParams.name }})</span>  
      </div>
      <el-button size="mini" type="default" icon="el-icon-arrow-left" @click="handleGoBack">返回上一级</el-button>
    </div>
    <div class="details-layout">
      <el-row style="text-align: left; margin-bottom: 16px">
        <el-button type="primary" size="mini" @click="handleSave" v-if="isOperate">保存</el-button>
        <el-button type="primary" size="mini" @click="handleSelectAll" v-if="isOperate && !isSelectAll">全选</el-button>
        <el-button type="primary" size="mini" @click="handleCancelSelectAll" v-if="isOperate && isSelectAll"
          >取消全选</el-button
        >
      </el-row>
      <el-table
        :data="checkSettingList"
        :stripe="true"
        :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="50"> </el-table-column>
        <el-table-column prop="variable" label="变量" align="center"></el-table-column>
        <el-table-column prop="variableName" label="变量名" align="center"></el-table-column>
        <el-table-column
          prop="status"
          align="center"
          :label="item.checkName"
          v-for="(item, index) in checkTypeList"
          :key="item.checkName"
        >
          <template slot="header">
            <el-checkbox style="margin-right: 4px" @change="handleColumnClick($event, index)"></el-checkbox>
            <span>{{ item.checkName }}</span>
            <!-- <el-checkbox v-model="item.value" @change="(value, columnParams) => { handleCheckChange(value, columnParams, item.columnParams) }">{{ item.checkName }}</el-checkbox> -->
          </template>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row[item.columnParams]"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { cloneDeep } from 'lodash-es'

export default {
  name: 'users-manage',

  data() {
    return {
      checkSettingList: [],
      roleList: [
        {
          roleId: '1',
          roleName: 'PM',
        },
        {
          roleId: '2',
          roleName: 'DM',
        },
        {
          roleId: '3',
          roleName: 'CRA',
        },
      ],
      tagList: [
        {
          text: 'S',
          value: 'S',
        },
        {
          text: 'D',
          value: 'D',
        },
        {
          text: 'M',
          value: 'M',
        },
        {
          text: 'P',
          value: 'P',
        },
      ],
      queryParams: {},
      checkTypeList: [],
      columnType: {
        0: 'checkSetupOne',
        1: 'checkSetupTwo',
        2: 'checkSetupThree',
        3: 'checkSetupFour',
        4: 'checkSetupFive',
      },
      columnTypeArray: ['checkSetupOne', 'checkSetupTwo', 'checkSetupThree', 'checkSetupFour', 'checkSetupFive'],
      isOperate: true,
      isSelectAll: false,
    }
  },
  mounted() {
    this.queryParams = this.$route.query
    const databaseInfo = JSON.parse(localStorage.getItem('sys-database-info')) || {}
    this.searchParams = {
      projectId: localStorage.getItem('sys-project-id') || '',
      ...databaseInfo,
      surface: this.queryParams.surface,
    }

    if (databaseInfo.isLock === '1') {
      this.isOperate = false
    }

    // this.getCheckSettingList()

    this.getCheckTypeConfigList()
  },

  methods: {
    ...mapActions('eCRFDesign', ['qryCheckSettingList', 'qryCheckTypeConfigList', 'saveCheckSettingList']),

    // 列控制按钮
    handleColumnClick(val, index) {
      const columnParams = this.checkTypeList[index].columnParams
      this.checkSettingList.forEach(item => {
        item[columnParams] = val
      })
    },

    // 全选
    handleSelectAll() {
      this.isSelectAll = true
      this.checkSettingList.forEach(item => {
        this.columnTypeArray.forEach(it => {
          item[it] = true
        })
      })
    },

    // 取消全选
    handleCancelSelectAll() {
      this.isSelectAll = false
      this.checkSettingList.forEach(item => {
        this.columnTypeArray.forEach(it => {
          item[it] = false
        })
      })
    },

    // 初始化获取表头和表格数据
    async getCheckTypeConfigList() {
      // 获取表头数据
      const paramsOne = {
        projectId: this.searchParams.projectId,
      }
      const res = await this.qryCheckTypeConfigList({ params: paramsOne })
      if (res.code === 200) {
        const list = []
        res.data.map((dItem, dIndex) => {
          dItem.columnParams = this.columnType[dIndex]
          if (dItem.status === 1) {
            dItem.value = false
            list.push(dItem)
          }
        })
        this.checkTypeList = list
      } else {
        this.$message.error(res.message || '服务异常，请稍后重试!')
      }

      // 获取表格数据
      const paramsTwo = {
        ...this.searchParams,
      }
      const result = await this.qryCheckSettingList({ params: paramsTwo })
      if (result.code === 200) {
        const list = []
        result.data.map((dItem, dIndex) => {
          dItem.checkSetupFive = !!parseInt(dItem.checkSetupFive)
          dItem.checkSetupFour = !!parseInt(dItem.checkSetupFour)
          dItem.checkSetupThree = !!parseInt(dItem.checkSetupThree)
          dItem.checkSetupTwo = !!parseInt(dItem.checkSetupTwo)
          dItem.checkSetupOne = !!parseInt(dItem.checkSetupOne)
          list.push(dItem)
        })
        this.checkSettingList = list
      } else {
        this.$message.error(result.message || '服务异常，请稍后重试!')
      }
    },

    // 返回上一级目录
    handleGoBack() {
      this.$router.go(-1)
    },

    // 查询列表
    getCheckSettingList() {
      const params = {
        ...this.searchParams,
      }
      this.qryCheckSettingList({ params }).then(res => {
        const { data, code, message } = res
        if (code === 200) {
          const list = []
          data.map((dItem, dIndex) => {
            dItem.checkSetupFive = !!parseInt(dItem.checkSetupFive)
            dItem.checkSetupFour = !!parseInt(dItem.checkSetupFour)
            dItem.checkSetupThree = !!parseInt(dItem.checkSetupThree)
            dItem.checkSetupTwo = !!parseInt(dItem.checkSetupTwo)
            dItem.checkSetupOne = !!parseInt(dItem.checkSetupOne)
            list.push(dItem)
          })
          this.checkSettingList = list
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    handleCheckChange(value, type, field) {
      const list = cloneDeep(this.checkTypeList)
      list.map((cItem, cIndex) => {
        if (cItem.columnParams === field) {
          cItem.value = !cItem.value
        }
      })

      this.checkTypeList = list

      this[field] = value
      const tempList = cloneDeep(this.checkSettingList)
      tempList.map((tItem, tIndex) => {
        if (tItem) {
          tItem[field] = value
        }
      })
      this.checkSettingList = tempList
    },

    // 保存
    handleSave() {
      const list = []
      this.checkSettingList.map((cItem, cIndex) => {
        const obj = {
          id: cItem.id,
          checkSetupOne: cItem.checkSetupOne ? 1 : 0,
          checkSetupTwo: cItem.checkSetupTwo ? 1 : 0,
          checkSetupThree: cItem.checkSetupThree ? 1 : 0,
          checkSetupFour: cItem.checkSetupFour ? 1 : 0,
          checkSetupFive: cItem.checkSetupFive ? 1 : 0,
        }
        list.push(obj)
      })
      const data = {
        ...this.searchParams,
        fieldChecksetup: list,
      }

      this.saveCheckSettingList({ data }).then(res => {
        const { code } = res
        if (code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success',
          })
          this.getCheckSettingList()
        }
        this.loading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
